<template>
    <q-item v-if='isShow' :class="getItemClass(item)">
        <q-item-main class="col-md">
            <q-item class="q-ma-none q-pa-none">
                <q-item-main><a :href="item.url" target="_blank">{{item.title}}</a></q-item-main>
                <q-btn 
                    icon="delete_outline" 
                    label="删除"
                    right flat dense color='grey-6'
                    @click="deleteArtical(item)"
                />
            </q-item>
            <q-item-tile sublabel class="q-size-xs">
                <q-btn flat dense :to="`/offical/${item.accountid}`">【{{item.accountname}}】</q-btn>{{item.publictime}}</q-item-tile>
            <div class="full-width q-mt-sm">
                <q-chip
                    class="q-mr-xs"
                    icon="mdi-eye"
                    dense
                    :color="item.clicksCount > 100000 ? 'orange': ''"
                >{{formatNumbers(item.clicksCount)}}</q-chip>
                <q-chip
                    class="q-mr-xs"
                    icon="mdi-hexagram-outline"
                    dense
                >{{formatNumbers(item.likeCount)}}</q-chip>
                <q-chip
                    class="q-mr-xs"
                    dense
                >在看率：{{ Math.round(10000 * item.likeCount / item.clicksCount )}}</q-chip>
            </div>
            <div class="full-width q-mt-sm">
                <span
                    v-for="(tag,index) in item.formatTags"
                    :key="item.articalid + '_tags_' + index"
                    class="cursor-pointer q-mr-xs"
                >
                    <q-btn
                        v-if="tag.key"
                        color="teal"
                        size="xs"
                        icon-right="mdi-pencil"
                        :label="tag.key"
                        dense
                        outline
                    />
                    <q-popup-edit
                        v-model="item.formatTags[index].key"
                        content-class="bg-accent"
                        @save="changeTags(item)"
                    >
                        <q-input v-model="item.formatTags[index].key" dense autofocus>
                            <template v-slot:append></template>
                        </q-input>
                    </q-popup-edit>
                </span>
                <div class="tags_adder inline" >
                    <span>
                        <q-chip dense><q-icon name="mdi-plus" /></q-chip>
                        <q-popup-edit
                            :persistent="!!item.newtags"
                            v-model="item.newtags"
                            content-class="bg-accent"
                            @save="addTagsToItem(item)"
                        >
                            <q-input v-model="item.newtags" dense autofocus>
                                <q-autocomplete
                                    @search="searchTags"
                                    :min-characters="1"
                                />
                            </q-input>
                        </q-popup-edit>
                    </span>
                </div>
            </div>
        </q-item-main>
        <!-- <q-item-side>
            <q-toggle
                v-model="item.modified"
                checked-icon="check"
                color="green"
                dense
                @input="changeModified(item)"
            />
        </q-item-side> -->
    </q-item>
</template>

<script>
export default {
  name: 'ArticalItem',
  props: {
    item: {
        type: Object,
        required: true      
    },
    position: {
        type: String,
        required: true
    },
    account: {
        type: Object,
        required: false
    }
  },
  data() {
      return {
          isShow: true,
      }
  },
  mounted() {
      this.isMobile = this.$q.platform.is.mobile
      this.isfavor = !!this.item.collected
  },
  methods: {
    countLikePercent( item ){
        let articalLikePercent = Math.round(10000 * item.likeCount / item.clicksCount )
        return articalLikePercent
    },
    getItemClass( item ){
        if( this.position == 'all' ){
            return ''
        }
        let _class = ''
        if( !!item.tags.join('').length ||
            this.countLikePercent(item) < this.account.likespercent
        ){
            return _class
        }

        if( item.clicksCount >= 50000 ){
            _class = 'bg-deep-orange-1'
        } else if ( item.clicksCount >= 10000 && item.clicksCount < 50000){
            _class = 'bg-orange-1'
        }
        console.log('_class', _class)
        return _class
    },
    deleteArtical( item ){
        this.$api.offical.deleteArtical( item.id, data => {
           this.$q.notify({
                message: "删除成功",
                position: "center",
                timeout: 1500,
                color: "negative"
            });
            this.isShow = false
        })
    },
     addTagsToItem( item ){
        if( !!item.newtags ){
            let existTags = item.formatTags.filter( _tag => {
                return item.newtags === _tag.key
            })
            if( existTags.length ){
                this.$q.notify({
                    message: '该标签已存在，无法重复添加', 
                    position: 'top',
                    color: 'orange'
                })  
                item.newtags = ''
                return
            }
            
            item.formatTags.push( {
                key: item.newtags,
                count: 1
            })
            item.newtags = ''
            let { articalid, formatTags, id } = item
            let _tags = []
            formatTags.map( tag => {
                !!tag.key && _tags.push( tag.key )
            })
            this.updateArtical( id, { tags: _tags }, data => {
                console.log('updated')
            } )
        }
    },
    changeTags( item ){
        // console.log( item.formatTags )
        let { articalid, formatTags, id, accountid } = item
        let _tags = []
        formatTags.map( tag => {
            !!tag && _tags.push( tag.key )
        })
        // console.log('id:::', id )
        this.updateArtical( id, { tags: _tags, accountid }, data => {
            console.log('updated')
        } )
    },
    updateArtical(articalid, options, callback) {
        this.$api.offical.updateArticals(articalid, options, callback);
    },
    searchTags( value, done ){
        // console.log( value )
        let localTags = this.$q.sessionStorage.get.item( 'tags' )
        let list = []
        localTags.map( item => {
            let { key: tag, count } = item
            if( tag.indexOf( value ) > -1 ) {
                console.log( tag, count )
                list.push({
                    label: `${tag} (${count})`,
                    value: tag,
                    count
                })
            }
        })
        list.sort( (A,B) => {
            return B.count - A.count
        })
        // console.log('list:::', list)
        done( list )
    },
    formatNumbers(num) {
        let number = "" + num;
        let showStr = "";
        if (number > 99999) {
            showStr = "10w+";
        } else if (number > 9999 && number < 100000) {
            showStr = Math.floor(number / 10000) + "w+";
        } else if (number > 999 && number < 10000) {
            showStr = Math.floor(number / 1000) + "k+";
        } else {
            showStr = number;
        }

        return showStr;
    }
  }
}
</script>
<style>
</style>